<template>
  <!-- 员工设置 -->
  <div style="display: flex">
    <!-- 部门，员工树状列表 -->
    <div style="width: 20%; height: 65vh">
      <el-tree
        ref="tree"
        v-loading="treeLoad"
        :data="deptList"
        default-expand-all
        :empty-text="treeEmptyText"
        :props="defaultProps"
      />
    </div>
    <div class="exhibit_box">
      <!-- 搜索条件 -->
      <div class="grid_3_column">
        <!-- 状态 -->
        <div class="flex_y_center">
          <div style="width: 60px; text-align: right">状态：</div>
          <el-select
            v-model="searchForm.status"
            clearable
            placeholder="请选择账号状态"
          >
            <el-option label="无数据" value="无数据" />
          </el-select>
        </div>
        <!-- 角色 -->
        <div class="flex_y_center">
          <div style="width: 60px; text-align: right">角色：</div>
          <el-select
            v-model="searchForm.name"
            clearable
            placeholder="请选择选择角色"
          >
            <el-option label="无数据" value="无数据" />
          </el-select>
        </div>
      </div>
      <!-- 筛选，更新按钮 -->
      <div style="margin-top: 10px">
        <el-button
          :loading="filterLoad"
          type="primary"
          @click="getUserList('filterLoad')"
        >
          筛选
        </el-button>
        <el-button
          icon="el-icon-refresh"
          :loading="renewLoad"
          @click="getUserList('renewLoad')"
        >
          更新
        </el-button>
      </div>

      <!-- 员工展示列表 -->
      <div id="tableBox" style="margin-top: 10px; flex-grow: 1">
        <el-table
          :data="tableData"
          :empty-text="emptyText"
          :max-height="tableMaxHeight"
        >
          <el-table-column align="center" width="100">
            <template slot-scope="scope">
              <el-avatar :src="scope.row.avatar" />
            </template>
          </el-table-column>
          <el-table-column label="员工" prop="name" />
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="所属部门" prop="department" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="primary" @click="scope">未知</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getDept, getUser } from '@/api/qw'

  export default {
    data() {
      return {
        treeLoad: false, // 树状结构加载样式显示隐藏
        treeEmptyText: ' ',
        deptList: [], // 左侧树状列表
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        // 搜索条件form
        searchForm: {
          status: '', // 状态
          name: '', // 角色
        },
        filterLoad: false, // 筛选按钮加载样式显示隐藏
        renewLoad: false, // 更新按钮加载样式显示隐藏
        emptyText: ' ',
        tableData: [], // 员工表格数据
        tableMaxHeight: '100', // 存放table表格容器自定义高度，设置默认值防止报错
      }
    },
    mounted() {
      this.getDeptList()
      this.getUserList()
    },
    methods: {
      // 获取左侧树状列表
      getDeptList() {
        this.treeLoad = true
        getDept().then((res) => {
          this.deptList = res.data
          this.treeLoad = false
          if (res.data.length == 0) {
            this.treeEmptyText = '暂无数据'
          }
        })
      },
      // 获取员工列表
      getUserList(btn) {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        this[btn] = true
        const params = {
          pageSize: this.page,
        }
        getUser(params).then((res) => {
          this.tableData = res.data
          // 获取表格容器高度
          this.tableMaxHeight = document.querySelector('#tableBox').clientHeight
          loading.close()
          this[btn] = false
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
    },
  }
</script>

<style scoped>
  ::v-deep .el-tree {
    width: 100%;
    height: 100%;
    font-weight: 600;
    padding: 15px 0;
    background-color: #fbfbfb;
  }
  ::v-deep .el-tree-node {
    white-space: normal;
  }
  ::v-deep .el-tree-node__content {
    padding: 18px 0;
  }

  .grid_3_column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  .exhibit_box {
    width: 80%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
  }
</style>
